<script lang="ts" setup>
import { UploadRequestOptions } from 'element-plus'
import { ref } from 'vue'

const props = defineProps<{
  modelValue: string
}>()
const emit = defineEmits<{
  'update:modelValue': [file: string]
}>()
const filePath = ref(props.modelValue.split('/').pop()!)
const httpRequest = (options: UploadRequestOptions) => {
  filePath.value = options.file.name.split('/').pop()!
  emit('update:modelValue', options.file.path)
}
</script>

<template>
  <div class="rounded-sm bg-slate-300">
    <el-upload
      ref="upload"
      action="#"
      :show-file-list="false"
      :limit="1"
      drag
      :http-request="httpRequest"
    >
      <div class="flex flex-col items-center gap-2">
        <div class="text-xs truncate">{{ filePath }}</div>
        <el-tag type="danger" size="small" effect="dark">
          <slot name="tip"></slot>
        </el-tag>
      </div>
    </el-upload>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-upload-dragger) {
  @apply py-5;
}
</style>
